
<template>
  <div
    class="applicationcode"
  >
    <!-- <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    /> -->
    <div class="wrapper">
      <div class="chart-head">{{ chartTitle }}</div>

      <div
        class="cartTable"
      >
        <table v-if="ByTypeData.length>0" width="100%" border="0" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>省区市</th>
              <th>隔离人数</th>
              <th>详细情况</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in ByTypeData" :key="item">
              <td>{{ item.name }}</td>
              <td>{{ item.value }}</td>

              <td @click="getAre(item)" />
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</template>

<script>
import $api from '@/api/index'
import { mapGetters } from 'vuex'
import Vue from 'vue'

import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data() {
    return {
      chartTitle: this.$route.query.name,
      ByTypeData: [],
      name: ''
    }
  },
  computed: {
    ...mapGetters([
      'reportId'
    ])
  },
  beforeCreate() {
    this.$dd.showTitleBar()
  },
  mounted() {
    // this.drawLine1()
    this.$dd.setTitle({
      title: '数据统计'
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
    this.name = this.$route.query.name
    this.countSituationByFromArea()
  },
  methods: {

    countSituationByFromArea() {
      $api.user.countSituationByFromArea({ reportIds: this.$route.query.type ? this.reportId : this.reportIds, type: 2, area: this.name }).then(res => {
        this.ByTypeData = res.data.map(item => {
          let a = {}
          Object.keys(item).forEach(ite => {
            a = { name: ite, value: item[ite] }
          })
          return a
        })
      })
    },
    getAre(arg) {
      this.$router.push({ path: '' })
    }
  }
}
</script>

<style lang="scss" scoped>
.applicationcode{
    width:100%;
    background-color: #F7FBFF;
    height:100%;
    padding: 28px;
    box-sizing: border-box;
}
.wrapper{
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0px 6px 12px 2px rgba(39,138,210,0.15);
    height: 100%;
    .chart-head{
      height: 92px;
      padding: 24px;
      text-align:center;
      font-size: 32px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #4989F2;
      box-sizing: border-box;
      box-shadow: 0px 12px 12px 2px rgba(101,159,255,0.12);
    }
    .statistics{
      margin-top: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .statistics-item{
        height: 160px;
        width: 200px;
        text-align: center;
        padding: 24px 10px;
        box-sizing: border-box;
        div{
          &:nth-child(1){
            font-size: 12px;
            margin-bottom: 22px;
          }
          &:nth-child(2){
            font-size: 36px;
            font-weight: bold;
          }
        }
      }

    }
  .cartTable{
      margin-top: 10px;
      height:calc(100% - 102px);
      width:100%;
      overflow: auto;
      table{
        background: #ffffff;
        max-height: 100%;
        overflow-y: auto;
        thead{
          // position: sticky;
          top: 0px;
          left: 0px;
        }
        tbody{
          tr:nth-child(2n){
            background-color: #f7fbff;
          }
        }
        th{
          text-align: center;
          padding: 5px 25px;
          box-sizing: border-box;
          height: 50px;
          font-size: 24px;
          font-weight: bold;
          color: #4989f2;
          background-color: #e8f0fd !important;
        }
        td{
          text-align: center;
          padding: 5px 25px;
          box-sizing: border-box;
          font-size: 22px;
          font-weight: 400;
          height: 50px;
          color: #252631;
        }
    }
    }
}
</style>
